<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    custom-class="page-dialog sys-user-dialog"
  >
    <el-form
      ref="memberForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="80px"
      class="page-form"
      style="width: 100%;"
    >
      <el-form-item label="会员昵称" prop="nickName">
        <el-input v-model="form.nickName" placeholder="请输入会员昵称" clearable readonly />
      </el-form-item>
      <el-form-item label="会员积分" prop="integral">
        <el-input v-model="form.integral" placeholder="默认积分为0" clearable :readonly="isDetail" />
      </el-form-item>
      <el-form-item label="折扣率" prop="discount">
        <el-input
          v-model="form.discount"
          placeholder="默认折扣率为0.0,范围为0~1之间"
          clearable
          :readonly="isDetail"
        />
      </el-form-item>
      <el-form-item label="账户余额" prop="balance">
        <el-input v-model="form.balance" placeholder="默认余额为0.00" clearable :readonly="isDetail" />
      </el-form-item>
      <el-form-item label="上传头像">
        <single-upload v-model="form.avatarUrl" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <template v-if="isDetail">
        <el-button type="primary" @click="dialogVisible=false">关闭</el-button>
      </template>
      <template v-else-if="isUpdate">
        <el-button @click="restForm()">取消</el-button>
        <el-button type="primary" @click="submitUpdateForm()">修改</el-button>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import memberApi from "@/api/system/member-api";
import uploadApi from "@/api/system/upload-api";

import SingleUpload from "@/components/Upload/singleUpload";

export default {
  name: "Member",
  components: { SingleUpload },
  props: {
    /* detail: 详细页面，update：编辑页面 */
    isDetail: {
      type: Boolean,
      default: false
    },
    isUpdate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: null,

      form: {
        id: null,
        nickName: null,
        email: null,
        phone: null,
        integral: null,
        discount: null,
        balance: null,
        description: null,
        cardNumber: null,
        avatarUrl: null
      },

      updateId: null,
      treeSelectData: null,
      /* 表单验证规则 */
      rules: {
        nickname: [
          { required: true, message: "请输入会员昵称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        discount: [
          {
            required: false,
            message: "请输入会员折扣率",
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              if (value < 0 || (value > 1 && value != null)) {
                callback(new Error("请输入[0,1]之间的数字"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        integral: [
          {
            required: false,
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              setTimeout(() => {
                if (!Number(value) && value != 0) {
                  callback(new Error("请输入正整数"));
                } else {
                  const re = /^[0-9]*[1-9][0-9]*$/;
                  const rsCheck = re.test(value);
                  if (!rsCheck  && value != 0) {
                    callback(new Error("请输入正整数"));
                  } else {
                    callback();
                  }
                }
              }, 0);
            }
          }
        ],
        balance: [
          {
            required: false,
            message: "请输入账户余额",
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              if (
                !/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(
                  value
                ) &&
                value != null &&
                value < 0
              ) {
                callback(new Error("账户余额最多两位小数！且不下于0"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handle(id,avatarUrl) {
      if (this.isDetail) {
        this.rules = null;
        /*  设置对话框的标题 */
        this.dialogTitle = "系统用户详情";
        this.getUserDetail(id);
      } else if (this.isUpdate) {
        this.dialogTitle = "修改系统用户";
        this.updateId = id;
        this.form.avatarUrl = avatarUrl;

        this.getUserDetail(id);
      }
      this.dialogVisible = true;
    },
    submitAddForm() {
      this.$refs.memberForm.validate(valid => {
        if (valid) {
          this.addMember();
          // this.$emit("getList")
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitUpdateForm() {
      this.$refs.memberForm.validate(valid => {
        if (valid) {
          this.updateMember();
          // this.$emit("getList")
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getUserDetail(id) {
      memberApi.detail(id).then(response => {
        if (response.code === 200) {
          this.form = response.data;
        }
      });
    },

    /* 修改会员信息 */
    updateMember() {
      const updateParam = {
        id: this.updateId,
        nickName: this.form.nickName,
        integral: this.form.integral,
        discount: this.form.discount,
        balance: this.form.balance,
        avatarUrl: this.form.avatarUrl
      };
      memberApi.update(updateParam).then(response => {
        if (response.code === 200) {
          this.restForm();
          this.$message({
            message: "修改会员信息成功",
            type: "success"
          });
          this.$emit("change");
        }
      });
    },
    /* 重置表单 */
    restForm() {
      this.$refs.memberForm.resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
.sys-user-dialog {
  margin-top: 40px !important;
}
.upload-container {
  padding: 0px 20px;
}

.img-container {
  width: 100%;
  text-align: center;
  padding: 0px;
  margin: 0px 0px 20px 0px;
}

.head {
  width: 100px;
  max-height: 100px;
}
</style>

<style lang="scss" scoped>
</style>
